<!--
 * 单选框
 * @作者: 陈老师儿~
 * @手机: 18560000860
 -->
<template>
    <view class="pure-switch" :class="classes" :style="styles" @tap="handleClick">
        <view class="pure-switch-text">
            <text class="pure-switch-text-open">{{ openText }}</text>
            <text class="pure-switch-text-close">{{ closeText }}</text>
        </view>
        <view class="pure-switch-node">
            <view class="pure-switch-icon pure-switch-loading pure-animate-spin" v-if="loading">
                <pure-icon :name="loadingIcon"></pure-icon>
            </view>
            <view class="pure-switch-icon pure-switch-status-icon pure-switch-open-icon" v-else-if="openIcon && modelValue">
                <pure-icon :name="openIcon"></pure-icon>
            </view>
            <view class="pure-switch-icon pure-switch-status-icon pure-switch-close-icon" v-else-if="closeIcon && !modelValue">
                <pure-icon :name="closeIcon"></pure-icon>
            </view>
        </view>
    </view>
</template>

<script>
    import props from "./props.js";
    export default {
        options: {
            // 将自定义节点设置成虚拟的
            // 头条、飞书：因为合并后丢失事件和 'provide/inject'
            // 京东：因为合并后不能合并外层 'class'
            // 百度：因为合并后会在控制台疯狂报警告
            // #ifndef MP-TOUTIAO || MP-LARK || MP-JD || MP-BAIDU
            virtualHost: true,
            // #endif

            // 组件样式隔离
            styleIsolation: "apply-shared",

            // 允许使用多个插槽
            multipleSlots: true,
        },
        props: props,
        emits: ["asyncChange", "update:modelValue"],
        inject: {
            // Field 组件的 change 事件
            onFieldChange: {
                from: "onFieldChange",
                default: () => {
                    return () => {};
                },
            },
        },
        watch: {
            // 监听 modelValue 的变化
            modelValue: {
                handler() {
                    // 如果值发生变化，并且表单字段验证时机为 change，则触发字段验证
                    this.onFieldChange();
                },
                deep: true,
            },
        },
        computed: {
            // classes
            classes() {
                const classes = [];

                // 选中状态
                if (this.modelValue) classes.push("pure-switch-open");

                // 禁用
                if (this.disabled) classes.push(this.disabledClass);

                return classes;
            },

            // styles
            styles() {
                const styles = [];
                return styles;
            },

            // 选中状态
            checked() {
                return this.checkedValue === this.value;
            },
        },
        methods: {
            // 点击事件
            handleClick() {
                // 禁用了
                if (this.disabled) return;

                // 异步控制
                if (this.async) {
                    this.$emit("asyncChange", !this.modelValue);
                    return;
                }

                this.$emit("update:modelValue", !this.modelValue);
            },
        },
    };
</script>

<style scoped>
    @import "./style.css";
</style>
